<template>
	<view class="wrap">
		<view class="list">
		  <view class="item" v-for="(item, index) in list">
		    <view class="title">{{item.createTime}}</view>
        <view class="content">
          <view class="info">
            <view class="name">{{item.remark}}</view>
            <view class="message">积分兑换成功</view>
          </view>
          <view class="points">+{{item.points}}</view>
        </view>
		  </view>
		  <view class="no-data">{{payload.hasmore ? '数据加载中...' : '暂无更多数据'}}</view>
		</view>
	</view>
</template>

<script>
	import {Points} from '../../apis/index.js'
	import {utils} from '../../utils/index.js'
	
	export default {
		data() {
			return {
				list: [],
				payload: {
				  hasmore: true,
				  pageSize: 6,
				  current: 1
				},
			};
		},
		onLoad (options) {
		  getList.call(this)
		},
		onReachBottom() {
		  if (this.payload.hasmore) {
		    this.payload.current += 1
		    getList.call(this)
		  }
		}
	}
	
	function getList () {
	  let userInfo = uni.getStorageSync('userInfo')
	  if (this.isLoading) return
	  this.isLoading = true
	  utils.wxLoading()
	  Points.getShopPointsList({
	    data: {
	      query: {
	        id: "2",//shopId--需改成变量
          userId: "2"
	      },
	      pagination: {
	        current: this.payload.current,
	        pageSize: this.payload.pageSize,
	      },
	    }
	  }).then(res => {
	    console.log('获取积分列表成功')
	    console.log(res.data)
	    this.isLoading = false
	    uni.stopPullDownRefresh()
	    uni.hideLoading()
	    if (res.data.code === 200) {
	      // utils.wxToastSuccess()
		  this.list = this.payload.current === 1 ? res.data.body : this.list.concat(res.data.body)
		  this.payload.hasmore = res.data.body.length === this.payload.pageSize
	    } else {
	      utils.wxToastFail()
	    }
	  }, err => {
	    uni.stopPullDownRefresh()
	    console.error('获取积分列表失败')
	    console.error(err)
	    this.isLoading = false
	    uni.hideLoading()
	  })
	}
</script>

<style lang="scss">
page {
  background-color: #EFEFEF;
}
.item {
  box-sizing: border-box;
  padding: 20rpx;
  margin-top: 10rpx;
  background-color: #FFF;
  .title {
    color: #999999;
    font-size: 24rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-bottom: #EFEFEF 1rpx solid;
  }
  .content {
    display: flex;
    box-sizing: border-box;
    padding-top: 10rpx;
    align-items: center;
    .info {
      flex: 1;
      .name {
        font-size: 28rpx;
        line-height: 1.5;
      }
      .message {
        color: #666;
        font-size: 24rpx;
        line-height: 1.5;
      }
    }
    .points {
      color: #E51C23;
      font-size: 36rpx;
    }
  }
}
.no-data {
  	color: #999999;
  	height: 50rpx;
  	line-height: 50rpx;
  	text-align: center;
  	font-size: 28rpx;
    }
</style>
